<script lang="ts" setup>
import OppoAi from '@/components/icon/oppo-ai.vue'
</script>

<template>
  <div class="_container" @click="$router.push({ name: 'reno14Pro' })">
    <picture>
      <source media="(max-width: 650px)" srcset="../image/reno14-pro/720-1060-mo.jpg" />
      <source media="(max-width: 1024px)" srcset="../image/reno14-pro/1536-800-pad-v2.jpg" />
      <img
        alt="OPPO Reno14 系列"
        class="object-cover lg:h-[clamp(27.5rem,13.2143rem+22.3214vw,40rem)] w-full h-auto aspect-[720/1060] min-[650px]:aspect-[1536/800] lg:aspect-[5120/1280]"
        loading="lazy"
        src="../image/reno14-pro/5120-1280-pc.jpg"
      />
    </picture>

    <div class="content_banner _pc-1312-content">
      <div>
        <oppo-ai class="w-[3.625rem] h-[0.75rem] lg:w-[5.875rem] lg:h-[1.25rem]" />
        <p class="text-3xl lg:text-[clamp(1.875rem,0.5893rem+2.0089vw,3rem)]">OPPO Reno14 系列</p>
        <p class="text-lg lg:text-[clamp(1.125rem,0.6964rem+0.6696vw,1.5rem)]">放大此刻生命力</p>
      </div>

      <div class="flex items-center mt-[1.125rem] gap-[1.25rem]">
        <button
          class="bg-black px-[1.4rem] text-xs text-white rounded-full leading-[2.6] lg:text-[clamp(0.75rem,0.6071rem+0.2232vw,0.875rem)] cursor-pointer"
        >
          了解更多
        </button>
        <div
          class="text-xs lg:text-[clamp(0.75rem,0.6071rem+0.2232vw,0.875rem)] py-0.5"
          style="border-bottom: 1px solid"
        >
          立即购买
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

._container {
  @apply relative flow-root cursor-pointer;
}

.content_banner {
  @apply absolute top-0 left-0 right-0 h-full sm:grid sm:content-between
  lg:pt-[3.5rem] lg:pb-[clamp(1.75rem,-0.8214rem+4.0179vw,4rem)]
  max-lg:pt-[2.5rem] max-lg:pb-[2rem];
}
</style>
